<template>
  <div>
    <ws-table-el ref="table" v-bind="tableConfig" :header-cell-style="{ background: '#F5F7FA' }">
      <template #search>
        <search-group>
          <label for>文件类型：</label>
          <el-select v-model="searchOptions.fileType" placeholder="请选择">
            <el-option v-for="item in getFileTypes" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </search-group>
        <search-group>
          <label for>创建时间：</label>
          <ws-date-range
            :startTime.sync="searchOptions.createTimeStart"
            :endTime.sync="searchOptions.createTimeEnd"
            :pickerOptions="{ disabledDate: null }"
          ></ws-date-range>
        </search-group>
      </template>
      <template #searchBtns>
        <div>
          <el-button-group>
            <ws-enter-event>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            </ws-enter-event>
            <ws-throttle>
              <el-button type="primary" icon="el-icon-refresh-left" @click="reset()"></el-button>
            </ws-throttle>
          </el-button-group>
        </div>
      </template>
      <template>
        <ws-table-column-el prop="fileType" label="文件类型">
          <template slot-scope="scope">
            {{ getFileTypeName(scope.row.type) }}
          </template>
        </ws-table-column-el>
        <ws-table-column-el prop="filename" label="文件名称"></ws-table-column-el>
        <ws-table-column-el prop="createTime" label="创建时间"></ws-table-column-el>
        <ws-table-column-el prop="createAdmin" label="创建人"></ws-table-column-el>
        <ws-table-column-el prop="count" label="下载次数"></ws-table-column-el>
        <ws-table-column-el prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag size="small" :type="{ 0: 'info', 1: 'info', 2: 'success', 3: 'danger' }[scope.row.status]">
              {{ scope.row.status | typeStatusFilters }}
            </el-tag>
          </template>
        </ws-table-column-el>
        <ws-table-column-el fixed="right" width="100" label="操作">
          <template slot-scope="scope">
            <ws-throttle>
              <el-button class="download" style="color: #0088ff" type="text" @click="showRecord(scope.row)">
                记录
              </el-button>
            </ws-throttle>
            <el-button type="text" style="color: #0088ff" @click="downLoad(scope.row)">下载</el-button>
          </template>
        </ws-table-column-el>
      </template>
    </ws-table-el>
    <record-list v-bind="current" v-model="showRecordDialog" v-if="showRecordDialog"></record-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import recordList from './components/record-list'
export default {
  name: 'downloadManage',
  components: {
    recordList
  },
  data() {
    return {
      searchOptions: {
        fileType: '',
        createTimeStart: '',
        createTimeEnd: ''
      },
      showRecordDialog: false,
      current: '',
      tableConfig: {
        pageId: '1000000',
        loading: true,
        filterColumns: false,
        emptyModel: true,
        indexColumn: true,
        data: [
          {
            fileType: 1,
            filename: 'kkkkkk',
            createTime: '2022-12-21',
            createAdmin: 'shshsssss',
            count: 2,
            status: 1
          }
        ],
        lazyQuery: {
          // moduleName: '/customerService/downloadManage',
          op: {
            selectList: 'selectAndPage',
            selectCount: 'selectByCount'
          },
          beforeQuery: this.beforeQuery
        }
      },
      moduleName: '/customerService/downloadManage'
    }
  },
  computed: {
    ...mapState(['typeStatusFilters']),
    getFileTypes() {
      let types = []
      let list = this.$getModuleOpList(this.moduleName)
      for (let [key, value] of Object.entries(list)) {
        if (value.resourcesUrl === '/fileTypes') {
          types.push({
            id: key,
            value: value.resourcesName
          })
        }
      }
      return types
    }
  },
  methods: {
    beforeQuery() {
      this.searchOptions.type = this.searchOptions.fileType
      this.searchOptions.createAdmin = this.searchOptions.userName
      this.searchOptions.startTime = this.searchOptions.createTimeStart
      this.searchOptions.endTime = this.searchOptions.createTimeEnd
      return this.searchOptions
    },
    showRecord(obj) {
      this.current = obj
      this.showRecordDialog = true
    },
    getFileTypeName(id) {
      let list = this.getFileTypes.filter((item) => {
        return item.id == id
      })
      return list[0] ? list[0].value : '-'
    },
    search() {
      this.$refs.table.search()
    },
    reset() {
      this.searchOptions = {
        fileType: '',
        createTimeStart: '',
        createTimeEnd: ''
      }
      this.search()
    },
    downLoad(row) {
      if (row.status != 2) {
        this.$message('系统还在处理中请稍后下载')
        return false
      }
      let data = {
        id: row.id,
        type: row.type,
        filename: row.filename
      }
      this.$downFile( this.powerList.download,{ data, op: 'download' },
        {
          responseType: 'arraybuffer',
          timeout: 30 * 60 * 1000
        }
      ).catch(() => this.$message.error('下载失败'))
    }
  }
}
</script>

<style lang="scss" scoped></style>
